<template>
	<Container>
		<view class="header">
			<view>{{ assignment.comparedArticle.name }}</view>
			<image class="comparedArticle img" :src="assignment.comparedArticle.imageUrl" mode="aspectFit"></image>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="assignment.questionName"/>
		<view class="articleBox">
			<view
				class="articleMain"
				v-for="(item, index) in assignment.optionArticles"
				:style="{ left: articleStyle[index].left, top: articleStyle[index].top, height: articleStyle[index].height }"
				:key="index"
			>
				<view :class="{ hidden: chooses[index] === 'hidden', success: chooses[index] === 'select' || chooses[index] === 'success', error: chooses[index] === 'error' }" @tap="tap(item, index)" class="articles">
					<image class="item" mode="aspectFit" :src="item.imageUrl"></image>
					<text class="name">{{ item.name }}</text>
					<SuccessIcon v-if="chooses[index] === 'success'" />
				</view>
			</view>
		</view>
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	data() {
		return {
			articleStyle: ''
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container, SuccessIcon },
	mounted() {
		console.log(this.assignment.optionArticles);
		if (this.assignment.optionArticles.length === 4) {
			this.articleStyle = [
				{ left: '0', top: '0', height: '50%' },
				{ left: '50%', top: '0', height: '50%' },
				{ left: '0', top: '40%', height: '50%' },
				{ left: '50%', top: '40%', height: '50%' }
			]
		}
		if (this.assignment.optionArticles.length === 5) {
			this.articleStyle = [
				{ left: '0', top: '0', height: '33%' },
				{ left: '50%', top: '0', height: '33%' },
				{ left: '0', top: '34%', height: '33%' },
				{ left: '50%', top: '34%', height: '33%' },
				{ left: '0', top: '68%', height: '33%' }
			]
		}
	},
	methods: {
		tap: function(item, index) {
			this.touchAudio()
			if (this.isComplete) return
			if (this.chooses[index] === 'select') {
				this.optionStatus('', index)
			} else {
				this.optionStatus('select', index)
				if (this.choosesKey.indexOf(index) < 0) this.choosesKey.push(index)
			}
			if (this.choosesKey.length === 2) {
				this.isComplete = true
				const bool = this.choosesKey.every(item => {
					return this.assignment.optionArticles[item].isMatched
				})
				if (bool) {
					this.choosesKey.map(item => {
						this.optionStatus('success', item)
					})
					this.articleStyle[this.choosesKey[0]].top = '10%'
					this.articleStyle[this.choosesKey[0]].left = '25%'
					this.articleStyle[this.choosesKey[1]].top = '50%'
					this.articleStyle[this.choosesKey[1]].left = '25%'
					this.assignment.optionArticles.map((item, current) => {
						if (this.choosesKey.indexOf(current) < 0) {
							this.optionStatus('hidden', current)
						}
					})
					this.$parent.next({
						isSure: true
					})
				} else {
					this.choosesKey.map(item => {
						this.optionStatus('error', item)
					})
					this.$parent.next()
				}
			}
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 100%
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	position relative
	margin 5vh 0
	display flex
	flex-direction column
	justify-content center
	align-items center
	view
		font-size 75rpx
		letter-spacing 40rpx
		margin-top 60rpx
	.comparedArticle
		margin-top 40rpx
		width 60%
		height 60%
		filter drop-shadow(0 0 10rpx #FDD065)
.articleBox
	width 100%
	height 45vh
	position relative
	.articleMain
		position absolute
		width 50%
		justify-content center
		align-items center
		display flex
		transition all 0.5s
		.articles
			transition all 0.4s
			border 8rpx solid #FCC77D
			background white
			box-sizing border-box
			justify-content center
			align-items center
			display flex
			border-radius 65rpx
			height 125rpx
			width 88%
			.item
				height 80%
				width 40%
			.name
				width 50%
				font-size 35rpx
				letter-spacing 8rpx
				text-align center
</style>
